


How to make a News Website Article skin on Ao3

by ElectricAlice



Series: CSS code scripts for Ao3 [2]
Category: Archive of Our Own
Genre: Fanwork Research & Reference Guides, Other, Work Skin
Language: English
Status: Completed
Published: 2019-12-26
Updated: 2019-12-26
Packaged: 2021-02-26 00:35:00
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 835
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/21974437
Author URL: https://archiveofourown.org/users/ElectricAlice/pseuds/ElectricAlice
Summary: Live example and tutorial for a news article extract that include website header, fake social media buttons, title and author of the article.
Series: CSS code scripts for Ao3 [2]
Series URL: https://archiveofourown.org/series/1940026
Comments: 4
Kudos: 49
Collections: A Guide to Coding and Fanworks, Fanfiction Reference Works, HTML & CSS stuffs





	How to make a News Website Article skin on Ao3

I used this for a modern media fic I did with user Janiedean. The original fic required online newspaper articles among the rest of the fic and I came up with this code I'm now sharing. If you're curious about the original fic, it's here: [#pykexit](https://archiveofourown.org/works/7275835)

#  Cat Ipsum 

### Howl on top of tall thing meow 

  
By Cat Ipsum  
Web Editor Intern  


  
  


Somehow manage to catch a bird but have no idea what to do next, so play with it until it dies of shock hey! you there, with the hands jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water if it fits i sits.

Groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked make it to the carpet before i vomit mmmmmm crusty butthole so when in doubt, wash so scratch at fleas, meow until belly rubs, hide behind curtain when vacuum cleaner is on scratch strangers and poo on owners food and meowzer loved it, hated it, loved it, hated it. Give me some of your food give me some of your food give me some of your food meh, i don't want it munch on tasty moths. Experiences short bursts of poo-phoria after going to the loo. Stare at owner accusingly then wink i shredded your linens for you. Meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think, i don’t know i can’t count see brother cat receive pets, attack out of jealousy meow loudly just to annoy owners. I want to go outside let me go outside nevermind inside is better ccccccccccccaaaaaaaaaaaaaaatttttttttttttttttssssssssssssssss swat at dog, yet poop on grasses and if it fits i sits for annoy owner until he gives you food say meow repeatedly until belly rubs, feels good. Cats are the world thug cat is good you understand your place in my world. If it fits i sits really likes hummus but damn that dog.

Cat ipsum courtesy of [Catipsum.com](http://www.catipsum.com/)

It is quite easy to achieve. It requires 2 parts: HTML code and a workskin in css. You'll find the codes for both in [here on github](https://github.com/electricalice/Ao3-News-workskin).

## How to use it

#### Set up a new work skin

This is easy don't worry. Ao3 makes it really fast.

  * Go to your **dashboard** on Ao3 and then on the right you'll find **"Skins"**. Click on there 
  * On the left there's a button **"Create site Skin"**
  * Set the **Type** as **'Workskin'** , this is important! 
  * Add a title for you to remember it (something like 'News Article' should work fine) 
  * Now Scroll and copy paste [this code](https://github.com/electricalice/Ao3-News-workskin/blob/master/workskin-code.css) in the part labelled **"CSS"**
  * Now press submit! 
  * This is it! 



Now your workskin is set and if you want you can use it for multiple fanfic. You don't need to set it up multiple times!

#### How to modify the article to your needs

  * The first thing to do should be to open your ao3 work and find the option **"Select Work Skin"** and find in the dropdown menu the workskin you just saved.
  * Now go edit your fic (or fic chapter) and **copy paste[this code](https://github.com/electricalice/Ao3-News-workskin/blob/master/article-code.html)** where you want to put the article 
  * Modifying should be fairly self-explanatory because I put comments on pretty much everything. 
  * If you want to remove any part of the article (newspaper logo, title, image of the author etc) **make sure to delete the part that is between the beginning and the end** of that part. 
    * I made sure to mark all the parts, so if you want to remove the pic of the author you remove everything that's between _<!--Pic Autor-->_ and _<!--End pic author-->_
    * It should be pretty straightforward. 
  * The Newspaper title has the option of having the **first letter bigger than the rest of the logo.** So insert the first letter between the <span> tags. Like this:  
_< h1><span class="first-letter-big">N</span>ewspaper <span class="first-letter-big">L</span>ogo</h1>_
    * This can also e simply removed and your code can just be like this: _< h1>Newspaper Logo</h1> _
  * Remember to insert the **url image in the Pic author** , instead of this: _http://insert-your-pic-url-here.jpg_. Please don't use gigantic images, it will just make the download of the page longer for your readership. The code will resize the image at 100px for 100px, so that size should be perfect. 
  * Write your fic article in its proper place! (Where it says _<!--start of the article-->_ and before _<!--End of the article-->_ ) 



And this is it. Be sure to preview your work, as something might have happened that made everything wonky!


End file.
